<!-- 统计 -->

<template>
  <div class="Statistic">
    <div>
      <div>进出统计</div>
      <LineChart id="Park-Statistic-inOut" :axis-list="inOutX" :data-list="inOutData" />
    </div>

    <div>
      <div>放行结果</div>
      <PieChart
        id="Park-Statistic-result"
        :radius="['50%', '70%']"
        :data-list="resultList"
        :colorList="['#56F6FF', '#FFE671', '#FF594D']"
      />
    </div>

    <div>
      <div>放行方式</div>
      <PieChart
        id="Park-Statistic-type"
        :radius="['50%', '70%']"
        :data-list="typeList"
        :colorList="['#56F6FF', '#FFE671', '#FF594D']"
      />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'Statistic',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixInfo('park'), CORE.mixWeb('park')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 进出统计 X 轴坐标
     */
    inOutX() {
      const { xData = [] } = this.info.inOut || {}
      return xData.map((item) => item.slice(-2))
    },

    /**
     * 进出统计数据
     */
    inOutData() {
      const { xData = [], content = [] } = this.info.inOut || {}
      const data = xData.map((_, i) => content[i] || 0)
      return {
        color: '#ff594d',
        data,
        showSymbol: false,
        smooth: true,
      }
    },

    /**
     * 放行结果列表
     */
    resultList() {
      const { info } = this
      return info.result.map(({ label: name, value }) => ({ name, value }))
    },

    /**
     * 放行类型列表
     */
    typeList() {
      const { info } = this
      return info.type.map(({ label: name, value }) => ({ name, value }))
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
